<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <base href="">
    <link href="./css/global.css" rel="stylesheet"/>
    <style>
        body {
            display: flex; /*设置为flex布局*/
            justify-content: center; /*水平居中*/
            align-items: center; /*垂直居中*/
            margin-top: 50px;
        }

        .container {
            padding: 10px;
            border: 1px solid black;
            width: 90%;
        }

        .input-div {
            margin-top: 15px;
            display: flex;

        }

        .form > div > label {
            flex: 1;
        }

        .button-div {
            margin-top: 20px;
            text-align: center;
        }

        .button-div > button {
            font-size: 16px;
            width: 50px;
            margin: 0 30px 0 30px;
        }
    </style>
</head>
<body>
<div class="container">
    <p id="err" style="color: red"></p>
    <p>基本信息</p>
    <form class="form"
          action="#"
          method="post">
        <div class="input-div">
            <input name="id" type="text" hidden value="${user.yhdm}">
            <label>
                <span>用户ID:</span>
                <c:if test="${empty user.yhid}">
                    <input type='text' name='userId' value="${user.yhid}">
                </c:if>
                <c:if test="${not empty user.yhid}">
                    <input type='text' name='userId' value="${user.yhid}" readonly>
                </c:if>
                <p style="color: red" id="userId">${YHID_Message}</p>
                <p style="color: red">${YHID_EXIST_Message}</p>
            </label>

            <label>
                <span>用户口令:</span>
                <input type='password' name='password' value="${user.yhkl}">
                <p style="color: red" id="password">${YHKL_Message}</p>
            </label>
            <label>
                <span>确认口令:</span>
                <input type='password' name='passwordSure' value="${user.yhkl}">
                <p style="color: red" id="passwordSure">${passwordSure_Message}</p>
            </label>
        </div>
        <div class="input-div">
            <label>
                <span>姓名:</span>
                <input type='text' name='username' style="margin-left: 13px" value="${user.yhxm}">
                <p style="color: red" id="username">${YHXM_Message}</p>

            </label>
            <label>
                <span>性别:</span>
                <select id="sex" name="sex" style="margin-left: 33px">
                    <c:forEach var="sex" items="${sexList}">
                        <option value="${sex.code}">${sex.mc}</option>
                    </c:forEach>
                </select>
            </label>
            <label>
                <span>部门:</span>
                <select id="depart" name="depart" style="margin-left: 33px">
                    <c:forEach var="depart" items="${departList}">
                        <option value="${depart.bmdm}">${depart.bmmc}</option>
                    </c:forEach>
                </select>
            </label>
        </div>
        <div class="input-div">
            <label>
                <span>日期选择:</span>
                <input type='date' name='date' value="${user.csrq}">
                <p style="color: red" id="date">${Date_Message}</p>
            </label>
            <label>
                <span>排序号:</span>
                <input type='text' name='sortNum' value="${user.pxh}">
                <p style="color: red" id="sortNum">${CSRQ_Message}</p>

            </label>

            <label>
                <span>禁用:</span>
                <input type='checkbox' name='disable'>
            </label>
        </div>
        <div class="button-div">
            <c:if test="${type != 0}">
                <button id="save" type="button">保存</button>
            </c:if>
            <button id="back" type="button">返回</button>
        </div>
    </form>

</div>

<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    var btn = document.getElementById('back');
    btn.onclick = function () {
        window.history.back();
    }

    $("#save").click(function () {
        let sortNum = $("input[name='sortNum']").val();
        let id = $("input[name='id']").val();
        let userId = $("input[name='userId']").val();
        let password = $("input[name='password']").val();
        let passwordSure = $("input[name='passwordSure']").val();
        let username = $("input[name='username']").val();
        let date = $("input[name='date']").val();
        let sex = $('#sex option:selected').val();
        let depart = $('#depart option:selected').val();

        let flag = 0;
        let message = ''

        if (!/^[1-9]\d*$/.test(sortNum)) {
            flag = 1
            message += "排序号不合法\n"
        }
        if (passwordSure == '' || password != passwordSure) {
            flag = 1
            message += "用户口令不一致\n"
        }
        if (userId == '') {
            flag = 1
            message += "用户Id，"
        }
        if (password == '') {
            flag = 1
            message += "用户口令，"
        }

        if (username == '') {
            flag = 1
            message += "用户姓名，"
        }
        if (date == '') {
            flag = 1
            message += "日期，"
        }

        if (1 == flag) {
            alert(message + "   必填")
        } else {
            let data = {
                id,
                sortNum, userId, password,
                username, date, sex, depart,
            }

            $.ajax({
                type: 'POST',
                url: "/jsp_demo/userSave",
                data: data,
                success: function (res) {
                    var res = eval(res);
                    if (1 == res) {
                        window.open("/jsp_demo/list.jsp")
                    }else {
                        alert("用户id已存在")
                    }
                },
                dataType: "text"
            });

        }
    })
</script>
</body>
</html>
